<template>
	<div class="bBox">
		<div class="left">
			<div class="shbj">基本信息</div>
			<div class="tBox">
				<table class="mailTable">
					<tr>
						<td class="column ">项目名称</td>
						<td class="nrkd">{{ detailProjectList.name || '无' }}</td>
						<td class="column ">项目负责人</td>
						<td class="nrkd">{{ detailProjectList.principalName || '无' }}</td>
					</tr>
					<tr>
						<td class="column">联系地址</td>
						<td class="nrkd " colspan="3">{{ detailProjectList.address || '无' }}</td>
					</tr>
					<tr>
						<td class="column ">项目类型</td>
						<td class="nrkd">{{ detailProjectList.type_mc || '无' }}</td>
						<td class="column ">计划开始时间</td>
						<td class="nrkd">{{ detailProjectList.startDate || '无' }}</td>
					</tr>
					<tr>
						<td class="column ">项目预算</td>
						<td class="nrkd ls">{{ detailProjectList.budget + '万元' }}</td>
						<td class="column ">计划结束时间</td>
						<td class="nrkd">{{ detailProjectList.endDate || '无' }}</td>
					</tr>
					<tr>
						<td class="column ">项目来源</td>
						<td class="nrkd">{{ detailProjectList.source_mc || '无' }}</td>
						<td class="column ">项目状态</td>
						<td class="nrkd" :style="{ color: qjzt[detailProjectList.status] ? qjzt[detailProjectList.status].color : '#000' }">
							{{ qjzt[detailProjectList.status] ? qjzt[detailProjectList.status].label : '无' }}
						</td>
					</tr>

					<tr>
						<td class="column">联系人</td>
						<td class="nrkd " colspan="3">
							<p class="contactBox" v-for="(item, index) in detailProjectList.projectContactList">
								<!-- 							<span>{{ '联系人' + Number(index + 1) }}</span> -->
								<span>{{ item.name }}</span>
								<span>{{ item.phone }}</span>
								<span>{{ item.remark }}</span>
							</p>
						</td>
					</tr>
					<tr>
						<td class="column">项目成员</td>
						<td class="nrkd lineHeight " colspan="3">{{ detailProjectList.personNames }}</td>
					</tr>

					<tr>
						<td class="column">项目描述</td>
						<td class="nrkd lineHeight" colspan="3">{{ detailProjectList.description }}</td>
					</tr>
				</table>
			</div>
		</div>

		<div class="right">
			<div class="shbj">客户跟进记录</div>

			<div class="infinite-list-wrapper" style="overflow: auto">
				<ul v-infinite-scroll="load" class="list" :infinite-scroll-immediate='isQuily' :infinite-scroll-disabled="disabled" infinite-scroll-distance="10" infinite-scroll-delay="500">
					<div v-for="i in count" :key="i" class="list-item">
						<div class="neFlex">{{ i.createTime }}</div>
						<div class="neFlex">{{ i.content }}</div>
						<div class="neFlex">{{ i.createBy }}</div>
					</div>
				</ul>
				<p style="font-size: 14px;" v-if="loading">加载中...</p>
				<p style="font-size: 14px;" v-if="noMore">没有更多了</p>
			</div>
		</div>
	</div>
	<div style="display: flex;justify-content: center;" @click="editProject()"><div class="bjan">编辑</div></div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { getProjectDetail, followList } from '@/api/hkd';
import moment from 'moment';
const count = ref([]);
const loading = ref(false);
const noMore = ref(false);
const disabled = ref(false);
const isQuily = ref(false);
const contactList = ref([]);
const totalNum = ref(0);
const detailProjectList = ref([]);
const { proxy } = getCurrentInstance();
const projectId = ref('');
const followForm = ref({
	pageNum: 1,
	pageSize: 10
});
const qjzt = ref({
	1: { color: '#999999FF', label: '未启动' },
	2: { color: '#1AC45FFF', label: '进行中' },
	3: { color: '#FA6400', label: '已暂停' },
	4: { color: '#BE1A21FF', label: '待验收' },
	5: { color: '#000000', label: '已完成' },
	6: { color: '#6257ff', label: '已终止' }
});

const load = () => {
	console.log(noMore.value);
	followForm.value.projectId = projectId.value;
	followList(followForm.value).then(res => {
		let list = res.rows || '';
		count.value = count.value.concat(list);
		totalNum.value = Number(res.total);
		if (followForm.value.pageNum * followForm.value.pageSize >= totalNum.value) {
			loading.value = false;
			noMore.value = true;
			disabled.value = true;
		} else {
			followForm.value.pageNum += 1; //当前页数字加一
			disabled.value = false;
			loading.value = true;
			noMore.value = false;
		}
	});
};
onMounted(() => {
	if (proxy.$route.query) {
		projectId.value = proxy.$route.query.projectId;
		getProjectXx();
		load();
	}
});
// 获取项目详情
function getProjectXx() {
	getProjectDetail({
		projectId: projectId.value
	}).then(res => {
		detailProjectList.value = res.data;
		isQuily.value = true
	});
}
function editProject(id) {
	proxy.$router.push({ path: '/editProject', query: { projectId: projectId.value } });
}
</script>

<style scoped lang="scss">
.infinite-list-wrapper {
	max-height: 88%;
	text-align: center;
}
.infinite-list-wrapper .list {
	padding: 0;
	margin: 0;
	list-style: none;
	margin-top: 10px;
}

.infinite-list-wrapper .list-item + .list-item {
	margin-top: 10px;
}

.list-item {
	display: flex;
	justify-content: space-between;
	div {
		// height: 100%;
		// line-height: 40px;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 9px 5px;
		line-height: 22px;
	}
	div:first-child {
		flex: 0.5;
		border: 2px solid #e6eaee;
		border-right: none;
	}
	div:nth-child(2) {
		flex: 1;
		border: 2px solid #e6eaee;
		border-right: none;
	}
	div:last-child {
		flex: 0.3;
		border: 2px solid #e6eaee;
	}
}
.bBox {
	width: 100%;
	height: 90%;
	// background: #FF0000;
	padding: 30px 60px;
	display: flex;
	.left,
	.right {
		flex: 1;
	}
	.left {
		padding-right: 20px;
		border-right: 2px dashed #cccccc;
	}
	.right {
		padding-left: 20px;
	}
}
:deep(.shbj) {
	background: url(../../assets/images/spbj.png) no-repeat;
	color: #be1a21;
	width: 150px;
	background-size: 100% 100%;
	padding: 5px 15px;
	font-size: 14px;
	margin-bottom: 10px;
	font-weight: 600;
}
.nrkd {
	width: 30% !important;
	line-height: 22px;
	padding: 10px;
}

.mailTable {
	margin: 20px 0;
	tr .column {
		text-align: center !important;
	}
}
.lineHeight {
	height: 82px;
	letter-spacing: 2px;
}
.contactBox {
	margin-top: 0;
	margin-bottom: 5px;
	span:first-child,
	span:nth-child(2) {
		margin-right: 20px;
	}
}
.ls {
	color: #bf1927ff !important;
}
.tBox {
	max-height: 580px;
	overflow: auto;
}
.bjan {
	margin-top: 0px;
	cursor: pointer;
	padding: 8px 14px;
	background: #ffdade;
	color: #be1a21ff;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
}
.tBox::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
</style>
